import React, { useState, useEffect } from 'react';
import { 
  Cpu, 
  Target, 
  Zap, 
  Clock, 
  CheckCircle2, 
  ArrowRight, 
  Users, 
  School, 
  Building2, 
  PenTool,
  Quote,
  Sparkles,
  Loader2,
  BrainCircuit,
  Lightbulb,
  Image as ImageIcon
} from 'lucide-react';

const App = () => {
  const [formData, setFormData] = useState({ name: '', email: '', organization: '', message: '' });
  
  // AI Feature States
  const [aiIndustry, setAiIndustry] = useState('');
  const [aiResult, setAiResult] = useState(null);
  const [isAiLoading, setIsAiLoading] = useState(false);
  const [aiError, setAiError] = useState(null);

  const apiKey = ""; // Environment provides key

  // Exponential backoff fetch function for Gemini API
  const fetchGemini = async (prompt, retryCount = 0) => {
    try {
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [{ parts: [{ text: prompt }] }],
          systemInstruction: { parts: [{ text: "אתה מומחה להטמעת בינה מלאכותית בארגונים ומחלקות עיצוב. ענה בצורה שיווקית, מקצועית וקצרה בעברית." }] }
        })
      });

      if (!response.ok) {
        if (response.status === 429 && retryCount < 5) {
          const delay = Math.pow(2, retryCount) * 1000;
          await new Promise(resolve => setTimeout(resolve, delay));
          return fetchGemini(prompt, retryCount + 1);
        }
        throw new Error('API request failed');
      }

      const data = await response.json();
      return data.candidates?.[0]?.content?.parts?.[0]?.text;
    } catch (err) {
      if (retryCount < 5) {
        const delay = Math.pow(2, retryCount) * 1000;
        await new Promise(resolve => setTimeout(resolve, delay));
        return fetchGemini(prompt, retryCount + 1);
      }
      throw err;
    }
  };

  const handleAiConsultation = async () => {
    if (!aiIndustry) return;
    setIsAiLoading(true);
    setAiError(null);
    setAiResult(null);

    const prompt = `אני עובד בתחום: ${aiIndustry}. תן לי 3 דוגמאות ספציפיות ומרגשות איך בינה מלאכותית יכולה לחסוך לי זמן וליצור תוצרים ויזואליים מדהימים ביומיום שלי. ענה בנקודות קצרות.`;

    try {
      const text = await fetchGemini(prompt);
      setAiResult(text);
    } catch (err) {
      setAiError("מצטערים, חלה שגיאה בחיבור ל-AI. נסו שוב מאוחר יותר.");
    } finally {
      setIsAiLoading(false);
    }
  };

  const SafeImage = ({ src, alt, className }) => {
    const [error, setError] = useState(false);
    if (error) {
      return (
        <div className={`${className} bg-slate-200 flex items-center justify-center border-2 border-dashed border-slate-300`}>
          <div className="text-center p-4">
            <ImageIcon className="w-8 h-8 mx-auto text-slate-400 mb-2" />
            <p className="text-xs text-slate-500 font-medium">{alt}</p>
          </div>
        </div>
      );
    }
    return (
      <img 
        src={src} 
        alt={alt} 
        className={className} 
        onError={() => setError(true)}
      />
    );
  };

  return (
    <div className="min-h-screen bg-white font-['Heebo'] text-slate-900 selection:bg-indigo-200" dir="rtl">
      <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;900&display=swap" rel="stylesheet" />

      {/* Header Section */}
      <header className="relative bg-indigo-950 text-white py-24 md:py-36 px-6 overflow-hidden">
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <div className="absolute top-[-10%] right-[-10%] w-[600px] h-[600px] bg-indigo-600 rounded-full blur-[180px] opacity-20 animate-pulse"></div>
          <div className="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-emerald-500 rounded-full blur-[150px] opacity-10 animate-pulse delay-700"></div>
          <div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '80px 80px', transform: 'perspective(500px) rotateX(60deg)', transformOrigin: 'top' }}></div>
        </div>

        <div className="max-w-6xl mx-auto relative z-10">
          <div className="grid md:grid-cols-2 gap-20 items-center">
            <div className="text-right space-y-8 animate-in fade-in slide-in-from-bottom-10 duration-1000">
              <span className="inline-block px-4 py-1.5 rounded-full bg-indigo-800/50 border border-indigo-400/30 text-emerald-400 text-sm font-bold tracking-widest uppercase mb-6">
                הטמעת AI חכמה בתוך העסק
              </span>
              <h1 className="text-6xl md:text-8xl font-black mb-6 leading-[1.1] tracking-tighter">
                AI, זה כואב? <br/>
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-cyan-300 to-indigo-400 animate-gradient-x">AI, זה כיף!</span>
              </h1>
              <p className="text-2xl md:text-3xl font-light text-indigo-100/90 leading-relaxed max-w-lg">
                כולם מדברים על AI. בואו נראה איך זה עובד <span className="text-white font-bold italic underline decoration-emerald-500 decoration-4 underline-offset-8">בשבילכם</span>.
              </p>
              <div className="pt-4">
                <a href="#contact" className="group relative bg-emerald-500 hover:bg-emerald-400 text-indigo-950 px-12 py-6 rounded-2xl text-2xl font-black transition-all shadow-2xl shadow-emerald-500/30 flex items-center gap-4 active:scale-95 overflow-hidden">
                  בואו נדבר תכל'ס
                  <ArrowRight className="w-7 h-7 group-hover:translate-x-[-8px] transition-transform duration-300" />
                </a>
              </div>
            </div>

            <div className="relative animate-in zoom-in-75 duration-1000 delay-500">
              <div className="relative z-20 group perspective-1000">
                <div className="absolute -inset-4 bg-gradient-to-tr from-emerald-500/20 to-indigo-500/20 rounded-[3rem] blur-2xl group-hover:opacity-100 transition duration-1000"></div>
                <div className="relative bg-indigo-900/40 p-3 rounded-[2.5rem] border border-white/10 backdrop-blur-sm transform transition-all duration-700 group-hover:rotate-y-12">
                   <SafeImage src="Untitled-3.gif" alt="AI interface" className="w-full h-auto object-cover rounded-[2rem] shadow-2xl" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Interactive AI Demo */}
      <section className="py-24 px-6 bg-slate-50 relative overflow-hidden">
        <div className="max-w-4xl mx-auto bg-white rounded-[3rem] p-12 shadow-2xl border border-slate-100 relative group">
          <div className="flex items-center gap-6 mb-10">
            <div className="p-4 bg-indigo-600 rounded-3xl shadow-xl shadow-indigo-100">
              <Sparkles className="text-white w-10 h-10" />
            </div>
            <h2 className="text-4xl font-black text-slate-800 tracking-tight">איך AI יעזור לכם היום?</h2>
          </div>
          <div className="flex flex-col lg:flex-row gap-5 mb-6">
            <input 
              type="text" 
              value={aiIndustry}
              onChange={(e) => setAiIndustry(e.target.value)}
              placeholder="כתבו כאן את תחום העיסוק שלכם..."
              className="flex-1 p-6 rounded-2xl border-2 border-slate-100 focus:border-indigo-500 outline-none text-2xl transition-all font-medium"
            />
            <button 
              onClick={handleAiConsultation}
              disabled={isAiLoading || !aiIndustry}
              className="group relative bg-indigo-600 hover:bg-indigo-700 text-white px-12 py-6 rounded-2xl font-black text-2xl flex items-center justify-center gap-3 transition-all active:scale-95"
            >
              {isAiLoading ? <Loader2 className="w-8 h-8 animate-spin" /> : <BrainCircuit className="w-8 h-8" />}
              בדקו פוטנציאל ✨
            </button>
          </div>
          {aiResult && (
            <div className="mt-12 p-10 bg-gradient-to-br from-indigo-950 to-slate-900 text-white rounded-[2.5rem] shadow-2xl animate-in fade-in zoom-in-95">
              <div className="whitespace-pre-wrap text-2xl leading-[1.6] opacity-90 font-light">{aiResult}</div>
            </div>
          )}
        </div>
      </section>

      {/* Main Content Section - Based on original file */}
      <section className="py-28 px-6 max-w-5xl mx-auto text-right">
        <div className="space-y-12">
          <div>
            <h3 className="text-4xl font-black mb-10 text-indigo-950">אבל בפועל:</h3>
            <ul className="space-y-6">
              <li className="text-2xl text-slate-700 flex items-center gap-4">
                <span className="w-2 h-2 bg-indigo-500 rounded-full"></span>
                זה מרגיש כמו ג'ונגל אחד גדול
              </li>
              <li className="text-2xl text-slate-700 flex items-center gap-4">
                <span className="w-2 h-2 bg-indigo-500 rounded-full"></span>
                לא יודעים מאיפה להתחיל
              </li>
              <li className="text-2xl text-slate-700 flex items-center gap-4">
                <span className="w-2 h-2 bg-indigo-500 rounded-full"></span>
                הכלים מפוזרים, מבלבלים, באנגלית
              </li>
              <li className="text-2xl text-slate-700 flex items-center gap-4">
                <span className="w-2 h-2 bg-indigo-500 rounded-full"></span>
                קורסים נשארים בתיאוריה ואין זמן "לשחק" ולבדוק
              </li>
            </ul>
            <p className="mt-12 text-3xl font-black text-slate-900">ובינתיים — העבודה ממשיכה כמו פעם.</p>
          </div>

          <div className="bg-gradient-to-r from-indigo-50 to-white p-12 rounded-[2.5rem] border-r-[16px] border-indigo-600 shadow-xl">
            <h3 className="text-3xl font-black mb-6 text-indigo-950">מה אני עושה אחרת?</h3>
            <p className="text-2xl leading-relaxed mb-6 font-bold text-indigo-700">
              אני מגיעה אליכם. ועובדת איתכם על החומר שלכם.
            </p>
            <p className="text-xl text-slate-700 leading-relaxed mb-8">
              מטמיעה AI בתוך שגרת העבודה הקיימת. לא מלמדת 'עקרונות' מופשטים ולא זורקת רשימת כלים. 
              <strong> ב־3-4 שעות אתם יוצאים עם כלים ותוצרים.</strong>
            </p>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-28 px-6 bg-slate-50">
        <div className="max-w-6xl mx-auto">
          <h3 className="text-4xl font-black mb-20 text-center text-slate-900">ויש גם המלצות חמות:</h3>
          <div className="grid lg:grid-cols-2 gap-16">
            <div className="bg-white p-6 rounded-[2rem] shadow-xl">
              <SafeImage src="image_9c4956.png" alt="המלצה מאסתר קצנלבוגן" className="w-full h-auto rounded-xl shadow-sm" />
            </div>
            <div className="bg-white p-6 rounded-[2rem] shadow-xl">
              <SafeImage src="image_9c4992.png" alt="המלצה מפייגי רוטנברג" className="w-full h-auto rounded-xl shadow-sm" />
            </div>
          </div>
        </div>
      </section>

      {/* Footer / Contact */}
      <section id="contact" className="py-32 px-6 bg-slate-900 text-white relative overflow-hidden">
        <div className="max-w-2xl mx-auto text-center relative z-10">
          <h3 className="text-5xl font-black mb-6">מוכנים להתקדם?</h3>
          <p className="text-indigo-200 mb-16 text-2xl font-light">השאירו פרטים ואחזור אליכם בהקדם לתיאום פגישה</p>
          <form className="space-y-6 text-right" onSubmit={(e) => e.preventDefault()}>
            <input type="text" placeholder="שם מלא" className="w-full p-6 rounded-2xl bg-white/5 border border-white/10 focus:bg-white/10 outline-none text-2xl transition-all" />
            <input type="email" placeholder="אימייל / טלפון" className="w-full p-6 rounded-2xl bg-white/5 border border-white/10 focus:bg-white/10 outline-none text-2xl transition-all" />
            <button className="w-full py-7 bg-emerald-500 hover:bg-emerald-400 text-indigo-950 font-black text-3xl rounded-2xl transition-all shadow-2xl active:scale-95">
              שלחי לי פרטים ✨
            </button>
          </form>
        </div>
      </section>

      <footer className="py-12 text-center bg-slate-950 text-slate-500">
        <p className="text-lg opacity-60">© {new Date().getFullYear()} רחלי זילבר | הטמעת בינה מלאכותית לעסקים</p>
      </footer>

      <style>{`
        @keyframes gradient-x { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .animate-gradient-x { background-size: 200% 200%; animation: gradient-x 5s ease infinite; }
        .perspective-1000 { perspective: 1000px; }
        .rotate-y-12 { transform: rotateY(-12deg); }
      `}</style>
    </div>
  );
};

export default App;